mouse pointerのいる行を取得するテスト
特定の座標から行を特定するcodeのテスト
実装
mouse pointerの取得
使用するproperty
offsetX
e.targetのlocal座標系でのx成分
screenX
e.targetのscreen座標系でのx成分
screen座標系ってなんだ？takker.icon
clientの物理的なdesplayの左上を原点とした座標系みたい
clientX
e.targetのborderを含む領域の左上を原点とした座標系
pageX
見えたい部分も含むページ全体の左上を原点とした座標系
行の移動を検知したときだけconsole.logを実行する
毎回やるとすごく見にくくなる
04:01:12 このcodeで問題なさそう
code:js
document.addEventListener('keydown',e=>{
const {left,top} = scrapboxDOM.textInput.getBoundingClientRect();
const rect = line.getBoundingClientRect();
return rect.top <= top && top < rect.bottom
//&& rect.left <= left && left < rect.right; // Y座標だけ範囲内であればいい
});
const line = target.closest('.line');
console.log({
line,
target,
})
})
こんな便利なやつあったのか
code:js
document.addEventListener('mousemove',e=>{
const target = document.elementFromPoint(e.clientX,e.clientY);
const line = target.closest('.line');
console.log({
line,
target,
})
})
これだと#text-inputがtargetに入っちゃうみたい
#text-inputがいる場所はどのみち行のDOMを取得できない
一旦#text-inputをdisplay: noneにしたら取得できるかな？
03:47:25 できた
こうした
code:js
const {top,left,width,height}=scrapboxDOM.textInput.getBoundingClientRect();
const display = scrapboxDOM.textInput.style.display;
scrapboxDOM.textInput.style.display='none';
const target = document.elementFromPoint(left+width/2,top+height/2);
scrapboxDOM.textInput.style.display=display;
画面の表示領域から外れるとtargetがnullになったりして正常に取得できない
上に別な要素が描画されていた場合も取得できない
nav barの固定表示とか
code:js
{
const observer = new MutationObserver(() => {
const {top, left, width, height} = scrapboxDOM.cursor.getBoundingClientRect();
const targets = document.elementsFromPoint(left + width / 2, top + height / 2);
const char = targets.find(target => target.matches('spanclass^="c-"')); const line = targets.find(target => target.matches('.line'));
console.log({
char,
line,
});
});
observer.observe(scrapboxDOM.cursor, {attributes: true});
}
やっぱり確実に取得するために、座標計算して検索したほうが無難かなあ
でも折返し処理とかが面倒なんだよなあ
code:js
document.addEventListener('keydown',e=>{
if(!/Arrow/.test(e.key))return;
const {top,left}=scrapboxDOM.textInput.getBoundingClientRect();
const target = document.elementFromPoint(left,top);
const line = target.closest('.line');
console.log({
line,
target,
})
})